<template>
    <div class="travel-community">
        <!-- 顶部导航 -->
        <header class="community-header">
            <div class="header-content">
                <h1 class="logo">TravelShare</h1>
                <div class="search-bar">
                    <input type="text" placeholder="搜索目的地、用户或话题..." />
                    <button class="search-btn">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
                <nav class="nav-links">
                    <router-link to="/">首页</router-link>
                    <router-link to="/discover">发现</router-link>
                    <router-link to="/trips">行程</router-link>
                    <router-link to="/messages">消息</router-link>
                    <div class="user-avatar">
                        <img :src="currentUser.avatar" :alt="currentUser.name" />
                    </div>
                </nav>
            </div>
        </header>

        <!-- 主要内容区 -->
        <main class="community-main">
            <!-- 左侧内容区 -->
            <div class="content-left">
                <!-- 发布框 -->
                <div class="post-box">
                    <div class="post-box-header">
                        <img :src="currentUser.avatar" :alt="currentUser.name" class="user-avatar" />
                        <input type="text" placeholder="分享你的旅行故事..." />
                    </div>
                    <div class="post-box-footer">
                        <button class="post-btn">发布</button>
                    </div>
                </div>

                <!-- 帖子列表 -->
                <div class="posts-list">
                    <div v-for="post in posts" :key="post.id" class="post-item">
                        <div class="post-header">
                            <img :src="post.user.avatar" :alt="post.user.name" class="user-avatar" />
                            <div class="user-info">
                                <h4>{{ post.user.name }}</h4>
                                <span class="post-time">{{ post.time }}</span>
                            </div>
                        </div>
                        <div class="post-content">
                            <p>{{ post.content }}</p>
                            <div class="post-images" v-if="post.images.length > 0">
                                <img v-for="(image, index) in post.images" :key="index" :src="image"
                                    :alt="'Post image ' + index" @click="openImageGallery(post.images, index)" />
                            </div>
                        </div>
                        <div class="post-footer">
                            <button class="action-btn">
                                <i class="far fa-heart"></i> {{ post.likes }}
                            </button>
                            <button class="action-btn">
                                <i class="far fa-comment"></i> {{ post.comments }}
                            </button>
                            <button class="action-btn">
                                <i class="fas fa-share"></i> 分享
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧边栏 -->
            <div class="sidebar-right">
                <!-- 热门目的地 -->
                <div class="sidebar-section">
                    <h3>热门目的地</h3>
                    <div class="popular-destinations">
                        <div v-for="destination in popularDestinations" :key="destination.id" class="destination-item">
                            <img :src="destination.image" :alt="destination.name" />
                            <div class="destination-info">
                                <h4>{{ destination.name }}</h4>
                                <span>{{ destination.posts }} 篇游记</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 推荐用户 -->
                <div class="sidebar-section">
                    <h3>推荐关注</h3>
                    <div class="recommended-users">
                        <div v-for="user in recommendedUsers" :key="user.id" class="user-item">
                            <img :src="user.avatar" :alt="user.name" class="user-avatar" />
                            <div class="user-info">
                                <h4>{{ user.name }}</h4>
                                <span>{{ user.followers }} 粉丝</span>
                            </div>
                            <button class="follow-btn">关注</button>
                        </div>
                    </div>
                </div>

                <!-- 热门话题 -->
                <div class="sidebar-section">
                    <h3>热门话题</h3>
                    <div class="popular-topics">
                        <div v-for="topic in popularTopics" :key="topic.id" class="topic-item">
                            <span class="topic-tag">#{{ topic.name }}</span>
                            <span class="topic-posts">{{ topic.posts }} 讨论</span>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</template>

<script>
    import { ref } from 'vue';

    export default {
        name: 'TravelCommunity',
        setup() {
            // 当前用户数据
            const currentUser = ref({
                id: 1,
                name: '旅行达人',
                avatar: 'https://randomuser.me/api/portraits/women/44.jpg',
                followers: 1245,
                following: 563
            });

            // 帖子数据
            const posts = ref([
                {
                    id: 1,
                    user: {
                        id: 2,
                        name: '背包客小张',
                        avatar: 'https://randomuser.me/api/portraits/men/32.jpg'
                    },
                    content: '刚刚从云南回来，大理的洱海真的太美了！推荐大家住在双廊古镇，早上起来就能看到日出，晚上还能看到满天繁星。',
                    images: [
                        'https://images.unsplash.com/photo-1547981609-4ab6cc31d8f7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                        'https://images.unsplash.com/photo-1545332528-59d43752e893?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60'
                    ],
                    time: '2小时前',
                    likes: 124,
                    comments: 23
                },
                {
                    id: 2,
                    user: {
                        id: 3,
                        name: '美食旅行家',
                        avatar: 'https://randomuser.me/api/portraits/women/65.jpg'
                    },
                    content: '东京美食探店！这家位于涩谷的拉面店是我吃过最棒的，汤底浓郁，面条劲道，叉烧入口即化。强烈推荐给去东京的朋友！',
                    images: [
                        'https://images.unsplash.com/photo-1550583720-4fb31ffc0d23?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60'
                    ],
                    time: '5小时前',
                    likes: 89,
                    comments: 12
                },
                {
                    id: 3,
                    user: {
                        id: 4,
                        name: '户外探险者',
                        avatar: 'https://randomuser.me/api/portraits/men/75.jpg'
                    },
                    content: '完成了尼泊尔ABC徒步！虽然很累但非常值得，沿途风景壮丽，还能近距离看到鱼尾峰。建议雨季过后去，天气会更好。',
                    images: [
                        'https://images.unsplash.com/photo-1580655653883-eb4e41bf293f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                        'https://images.unsplash.com/photo-1580655653883-eb4e41bf293f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                        'https://images.unsplash.com/photo-1580655653883-eb4e41bf293f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60'
                    ],
                    time: '昨天',
                    likes: 256,
                    comments: 45
                }
            ]);

            // 热门目的地
            const popularDestinations = ref([
                {
                    id: 1,
                    name: '巴厘岛',
                    image: 'https://images.unsplash.com/photo-1537996194471-e657df975ab4?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    posts: 1245
                },
                {
                    id: 2,
                    name: '京都',
                    image: 'https://images.unsplash.com/photo-1492571350019-22de08371fd3?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    posts: 982
                },
                {
                    id: 3,
                    name: '巴黎',
                    image: 'https://images.unsplash.com/photo-1431274172761-fca41d930114?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    posts: 1567
                },
                {
                    id: 4,
                    name: '冰岛',
                    image: 'https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    posts: 723
                }
            ]);

            // 推荐用户
            const recommendedUsers = ref([
                {
                    id: 5,
                    name: '旅行摄影师',
                    avatar: 'https://randomuser.me/api/portraits/men/22.jpg',
                    followers: 8765
                },
                {
                    id: 6,
                    name: '环球旅行家',
                    avatar: 'https://randomuser.me/api/portraits/women/33.jpg',
                    followers: 12453
                },
                {
                    id: 7,
                    name: '美食探索者',
                    avatar: 'https://randomuser.me/api/portraits/men/45.jpg',
                    followers: 5432
                }
            ]);

            // 热门话题
            const popularTopics = ref([
                {
                    id: 1,
                    name: '独自旅行',
                    posts: 2456
                },
                {
                    id: 2,
                    name: '背包客',
                    posts: 1876
                },
                {
                    id: 3,
                    name: '美食之旅',
                    posts: 3245
                },
                {
                    id: 4,
                    name: '摄影技巧',
                    posts: 1567
                },
                {
                    id: 5,
                    name: '省钱攻略',
                    posts: 2987
                }
            ]);

            // 打开图片画廊
            const openImageGallery = (images, index) => {
                console.log('打开图片画廊', images, index);
                // 这里可以添加图片画廊的逻辑
            };

            return {
                currentUser,
                posts,
                popularDestinations,
                recommendedUsers,
                popularTopics,
                openImageGallery
            };
        }
    };
</script>

<style scoped>
    /* 基础样式 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f5f5f5;
    }

    .travel-community {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    /* 头部样式 */
    .community-header {
        background-color: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .header-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 1200px;
        margin: 0 auto;
        padding: 15px 20px;
    }

    .logo {
        color: #4CAF50;
        font-size: 24px;
        font-weight: bold;
    }

    .search-bar {
        display: flex;
        align-items: center;
        width: 40%;
    }

    .search-bar input {
        width: 100%;
        padding: 10px 15px;
        border: 1px solid #ddd;
        border-radius: 20px;
        outline: none;
        font-size: 14px;
    }

    .search-btn {
        background: none;
        border: none;
        margin-left: -35px;
        color: #777;
        cursor: pointer;
    }

    .nav-links {
        display: flex;
        align-items: center;
    }

    .nav-links a {
        margin: 0 15px;
        text-decoration: none;
        color: #333;
        font-weight: 500;
        transition: color 0.3s;
    }

    .nav-links a:hover {
        color: #4CAF50;
    }

    .user-avatar img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
    }

    /* 主要内容区 */
    .community-main {
        display: flex;
        max-width: 1200px;
        margin: 20px auto;
        padding: 0 20px;
        gap: 20px;
    }

    .content-left {
        flex: 2;
    }

    .sidebar-right {
        flex: 1;
    }

    /* 发布框样式 */
    .post-box {
        background-color: #fff;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 20px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .post-box-header {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }

    .post-box-header img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 15px;
    }

    .post-box-header input {
        flex: 1;
        padding: 12px 15px;
        border: 1px solid #ddd;
        border-radius: 25px;
        outline: none;
        font-size: 14px;
    }

    .post-box-footer {
        display: flex;
        justify-content: flex-end;
    }

    .post-btn {
        background-color: #4CAF50;
        color: white;
        border: none;
        padding: 8px 20px;
        border-radius: 20px;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .post-btn:hover {
        background-color: #3d8b40;
    }

    /* 帖子列表样式 */
    .posts-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .post-item {
        background-color: #fff;
        border-radius: 10px;
        padding: 15px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .post-header {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }

    .post-header img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 15px;
    }

    .user-info h4 {
        font-size: 16px;
        margin-bottom: 3px;
    }

    .post-time {
        font-size: 12px;
        color: #777;
    }

    .post-content p {
        margin-bottom: 15px;
        line-height: 1.5;
    }

    .post-images {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
        margin-bottom: 15px;
    }

    .post-images img {
        width: 100%;
        height: 150px;
        object-fit: cover;
        border-radius: 8px;
        cursor: pointer;
        transition: transform 0.3s;
    }

    .post-images img:hover {
        transform: scale(1.02);
    }

    .post-footer {
        display: flex;
        justify-content: space-around;
        border-top: 1px solid #eee;
        padding-top: 10px;
    }

    .action-btn {
        background: none;
        border: none;
        color: #555;
        font-size: 14px;
        cursor: pointer;
        transition: color 0.3s;
    }

    .action-btn:hover {
        color: #4CAF50;
    }

    .action-btn i {
        margin-right: 5px;
    }

    /* 侧边栏样式 */
    .sidebar-section {
        background-color: #fff;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 20px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .sidebar-section h3 {
        margin-bottom: 15px;
        font-size: 16px;
        color: #333;
    }

    /* 热门目的地样式 */
    .popular-destinations {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .destination-item {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .destination-item img {
        width: 60px;
        height: 60px;
        border-radius: 8px;
        object-fit: cover;
    }

    .destination-info h4 {
        font-size: 14px;
        margin-bottom: 3px;
    }

    .destination-info span {
        font-size: 12px;
        color: #777;
    }

    /* 推荐用户样式 */
    .recommended-users {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .user-item {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .user-item img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: cover;
    }

    .user-info h4 {
        font-size: 14px;
        margin-bottom: 3px;
    }

    .user-info span {
        font-size: 12px;
        color: #777;
    }

    .follow-btn {
        margin-left: auto;
        background-color: #4CAF50;
        color: white;
        border: none;
        padding: 5px 12px;
        border-radius: 15px;
        font-size: 12px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .follow-btn:hover {
        background-color: #3d8b40;
    }

    /* 热门话题样式 */
    .popular-topics {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .topic-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
    }

    .topic-tag {
        font-weight: bold;
        color: #4CAF50;
    }

    .topic-posts {
        font-size: 12px;
        color: #777;
    }

    /* 响应式设计 */
    @media (max-width: 992px) {
        .community-main {
            flex-direction: column;
        }

        .content-left,
        .sidebar-right {
            width: 100%;
        }
    }

    @media (max-width: 768px) {
        .header-content {
            flex-direction: column;
            gap: 15px;
        }

        .search-bar {
            width: 100%;
        }

        .nav-links {
            width: 100%;
            justify-content: space-between;
        }
    }
</style>